<template>
    <div>
        <el-dialog title="查看联系人" :visible.sync="dialogVisible" width="60%">
            <el-form :inline="true" ref="params" size="small" :model="params" class="demo-form-inline"
                @submit.native.prevent>
                <!-- <el-form-item label="真实姓名">
                    <el-input @keyup.enter.native="onSubmit" v-model="params.realName" clearable
                        placeholder="真实姓名"></el-input>
                </el-form-item> -->
                <el-form-item label="用户名">
                    <el-input @keyup.enter.native="onSubmit" v-model="params.userName" clearable
                        placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="tableData" style="width: 100%"
                :header-cell-style="{ background: '#f0f2f5' }"  ref="tableRef"
                >
                <el-table-column label="序号" width="48" type="index"></el-table-column>
                <el-table-column prop="nickName" label="用户名" width="150">
                </el-table-column>
                <el-table-column prop="realName" label="真实姓名" width="100">
                </el-table-column>
                <el-table-column prop="phone" label="联系方式"  width="130">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="170" >
                </el-table-column>
                <el-table-column prop="registrationType" label="用户类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.registrationType === '0'">企业</span>
                        <span v-if="scope.row.registrationType === '1'">个人用户</span>
                        <span v-if="scope.row.registrationType === '2'">政府</span>
                        <span v-if="scope.row.registrationType === '5'">民非组织</span>
                        <span v-if="scope.row.registrationType === '6'">教培组织</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleOnline(scope.row)" type="text" size="small">线上沟通</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="poolPage">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.page" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-dialog>
        <!-- 线上沟通 -->
        <OnlineList  ref="online"/>
    </div>
</template>
<script>
import { contactsList } from "@/request/api/resource"
import OnlineList from "@/components/personalCenter/onlineList/onlineList"
export default {
    components: {
        OnlineList
    },
    data() {
        return {
            loading: true,
            tableData: [],
            params: {
                resourceId: '',//资源id
                userName:'',//用户名称
            },
            total: 0,
            dialogVisible:false
        }
    },
    methods: {
        open(id){
            this.dialogVisible=true
            this.params.resourceId=id
            this.getResoure()
        },
        // 获取列表
        getResoure() {
            contactsList(this.params).then(res => {
                this.loading = false
                if (res.data.code === 200) {
                    this.tableData = res.data.result.items
                    this.total = res.data.result.total
                }
            })
        },
        // 搜索
        onSubmit() {
            this.params.page = 1;
            this.getResoure();
        },
        // 重置
        onReset() {
            this.params.userName=''
            this.params.page=1
            this.params.pageSize=10
            this.getResoure();
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getResoure();
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getResoure();
        },
        // 查看详情
        handleDetail(id) {
            this.$refs.detailContent.open(id)
        },
        // 线上沟通
        handleOnline(data){
            let params={
                resourceId:this.params.resourceId,
                userId:data.id,
                name:data.nickName,
                roomId:data.roomId,
                type:'0',//类型：0发布者；1咨询者
            }
            this.$refs.online.open(params)
        }
    }
}
</script>
<style lang="less" scoped>
.poolPage {
    margin-top: 15px;
    text-align: right;
}</style>

